<template>
	<view class="form-index">
		<rf-navbar title="意见与建议" back @click="onBack"></rf-navbar>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u-form labelPosition="top" labelWidth="300rpx" ref="uForm" :model="form" :rules="rules">
			<u-form-item label="内容描述" prop="content">
				<u--textarea v-model="form.content" count height="100" maxlength="200" border="none"
					placeholder="请详细填写您遇到的问题，或者您希望增加什么样的功能,便于我们努力改善~" :confirmType="done"></u--textarea>
			</u-form-item>
			<u-form-item label="上传截图（0/5）">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					uploadIcon="plus" :maxCount="5"></u-upload>
			</u-form-item>
			<u-form-item label="联系方式" prop="phone">
				<u-input v-model="form.phone" placeholder="请输入您的联系方式" />
			</u-form-item>
			<view class="text">
				<view>
					<image class="icon-warn-orange" style="width: 28rpx; height: 28rpx;"></image>
				</view>
				<view class="texts">如果您愿意参与问题调试，请您尽可能多的留下您的反馈内容，如果有必要，我们会联系您。</view>
			</view>
		</u-form>
		<view class="btn" @click="submit">提交</view>
		<u-popup :round="10" :show="successPop" mode="center" :safeAreaInsetBottom="false" @close="closePop">
			<view class="successPop">
				<u-icon name="checkmark-circle-fill" color="#58C866" size="60"></u-icon>
				<view class="" style="font-size: 32rpx;">提交成功</view>
				<view class="desc">感谢您的宝贵意见与建议</view>
				<!-- <view class="loginoutBtn">
					<view class="btn" @click="onClickLogout">确定</view>
					<view class="btn cancel" @click="showLogout=false">取消</view>
				</view> -->
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		addSuggest,
		uploadfile,
		deletefile
	} from "@/api/user.js"
	export default {
		data() {
			return {
				show: false,
				title: '标题',
				content: `空山新雨后<br>
									天气晚来秋`,

				form: {
					content: "",
					phone: ""
				},
				fileList1: [],

				rules: {
					phone: [{
							validator: (rule, value, callback) => {
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}
							},
							message: "手机号格式不正确",
							trigger: "blur"
						},
						{
							type: 'string',
							required: true,
							message: '手机号码不能为空',
							trigger: ['blur', 'change']
						}
					],
					content: {
						type: 'string',
						required: true,
						message: '请填写内容描述',
						trigger: ['blur', 'change']
					}
				},
				successPop: false
			};
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			closePop() {
				this.successPop = false
				uni.navigateBack()
			},
			submit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
						return
					}
				});

				// "id": 0,
				//  "content": "string",
				//  "contactInformation": "string",
				//  "imageList": [
				//    "string"
				//  ],

				console.log("this.from: " + JSON.stringify(this.form));
				console.log("this.fileList1: " + JSON.stringify(this.fileList1));

				const arr = this.fileList1.map((item) => {
					return item.url
				});
				console.log("arr: " + JSON.stringify(arr));
				const data = {
					"content": this.form.content,
					"contactInformation": this.form.phone,
					"imageList": arr
				}
				console.log("data: " + JSON.stringify(data));
				addSuggest(data).then(res => {
					console.log("res: " + JSON.stringify(res));
					this.successPop = true
					setTimeout(() => {
						this.successPop = false;
						uni.navigateBack()
					}, 1000)
				})
			},
			// 删除图片
			deletePic(event) {
				console.log(event);

				const data = {
					"path": "asdfasdf"
				}

				deletefile(data).then(res => {
					console.log("data: " + JSON.stringify(data));
				})
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {

				return new Promise((resolve, reject) => {
					uploadfile(url).then(res => {
						setTimeout(() => {
							console.log(res);
							console.log("res: " + JSON.stringify(res));
							resolve(res);
						}, 1000);
					})
				});
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep.u-textarea__count {
		background-color: #f4f7f9 !important;
	}

	::v-deep.u-input {
		background-color: #f4f7f9;
	}

	::v-deep.u-border {
		border-color: #f4f7f9 !important;
	}

	::v-deep.u-textarea {
		background-color: #f4f7f9 !important;
	}

	::v-deep.u-form-item__body__left__content__required {
		position: absolute;
		left: 148rpx;
		color: #f56c6c;
		line-height: 20px;
		font-size: 20px;
		top: 10rpx;
	}

	::v-deep.u-form-item__body__left__content__label {
		margin: 0 0 14rpx 0;
		font-weight: 500;
		color: #000000;
		font-size: 34rpx;
	}

	.form-index {
		padding: 30rpx;

		.text {
			margin-top: 10rpx;
			display: flex;
			justify-content: flex-start;

			.texts {
				margin-left: 14rpx;

				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7B838F;
				line-height: 34rpx;

			}
		}

		.btn {
			margin: 300rpx auto 0;
			width: 90%;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			color: #ffffff;
			background: #58c866;
			border-radius: 44rpx;
		}

		// 提交成功弹窗
		.successPop {
			width: 480rpx;
			height: 320rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;

			.desc {
				color: #77798D;
				margin-top: 20rpx;
			}
		}
	}
</style>